<template >
  <div style="width:100vw;" class="teacher-list-box">
    <!-- <div class="record-header">
      <mt-header fixed title="我的导师">
        <router-link to="/StudyCenter" slot="left">
          <mt-button class="back-butt" icon="back"></mt-button>
        </router-link>
      </mt-header>
    </div>-->
    <!-- <TopTab @setTeaType="getProps" :tabText="tabText"> -->
    <div>
      <div class="search-box">
        <mt-search v-model="searchVal" cancel-text="取消" placeholder="搜索"></mt-search>
      </div>
      <div class="bscroll" ref="teacherList">
        <div :style="loadedDown ? 'padding-bottom:70px;' : ''" class="bscroll-container">
          <div class="default-page-box" v-show="teacherList.length == 0">
            <div class="default-page">
              <div class="default-text">哎呀，空空如也!</div>
            </div>
          </div>
          <div
            style="position:relative;"
            @click="goDetail(item.id)"
            v-for="(item,index) in teacherList"
            :key="index"
            class="teacher-list-item flex-row"
          >
            <div
              :style="`background-image:url(${item.photo || require('@/assets/homePicture/userpicture.png')});`"
              class="item-img"
            >
              <!-- <img src="@/assets/homePicture/userpicture.png" alt /> -->
            </div>
            <div>
              <p class="item-tip">{{item.username}}</p>
              <p class="item-content">{{item.deptName}}</p>
            </div>
            <span style="position:absolute;right:20px;font-size:20px;" class="iconfont icongengduo"></span>
          </div>
          <div v-show="loadingDown" style="padding:10px;text-align:center;">
            <mt-spinner type="snake"></mt-spinner>
          </div>
          <div v-show="loadedDown" style="line-height:50px;text-align:center;">没有更多数据</div>
        </div>
      </div>
    </div>
    <!-- </TopTab> -->
  </div>
</template>
<script>
import { setText } from "../../untils/ddnavigate";
import BScroll from "better-scroll";
export default {
  data() {
    return {
      searchVal: "",
      teacherList: [],
      pageTotal: "",
      params: {
        name: "",
        teaType: 0, // 内部导师0  外部导师1
        page: 1,
        pageSize: 10
      },
      loadingDown: false,
      loadingUp: false,
      loadedDown: false
    };
  },
  mounted() {
    setText("内部导师");
    let { params } = this;
    this.$post("qryTeaSimple", params).then(res => {
      if (res.success) {
        this.teacherList = res.data.teaSimpleList;
        this.pageTotal = res.data.totals;
        // better-scroll初始化
        this.initScroll("teacherList");
      }
    });
  },
  watch: {
    searchVal(oldVal, newVal) {
      let { params } = this;
      params.name = oldVal;
      params.page = 1;
      this.loadedDown = false;
      this.loadingDown = false;
      this.loadingUp = false;
      this.teacherList = [];
      this.publicAjax(params);
    }
  },
  methods: {
    goDetail(id) {
      this.$router.push({ path: "/teacherDetail", query: { userId: id } });
    },
    initScroll(dom) {
      let that = this;
      that.$nextTick(() => {
        let bscrollDom = this.$refs[dom];
        let bScroll = new BScroll(bscrollDom, {
          click: true,
          probeType: 2,
          bounceTime: 700, //回弹时间
          pullUpLoad: {
            threshold: 0, // 当上拉距离超过50px时触发 pullingUp 事件
            stop: 50
          },
          useTransition: false // 防止iphone微信滑动卡顿
        });
        // bScroll.on("pullingDown", () => {
        //   that.loadingUp = true;
        //   that.loadedDown = false;
        //   that.params.page = 1;
        //   setTimeout(() => {
        //     that.classFunction(that.params, dom, "downLoad");
        //   }, 1000);
        //   bScroll.finishPullDown();
        // });
        bScroll.on("pullingUp", () => {
          let { pageTotal } = that;
          console.log(pageTotal);
          if (that[dom].length < pageTotal) {
            that.loadingDown = true;
            that.params.page++;
            setTimeout(() => {
              that.publicAjax(that.params, dom, "upLoad");
            }, 1000);
          } else {
            that.loadedDown = true;
          }
          bScroll.finishPullUp();
        });
        bScroll.refresh();
      });
    },
    publicAjax(params) {
      let that = this;
      that.$post("qryTeaSimple", params).then(res => {
        if (res.success) {
          that.teacherList = that.teacherList.concat(res.data.teaSimpleList);
          that.loadingDown = false;
          that.loadingUp = false;
        } else {
          that.loadingDown = false;
          that.loadingUp = false;
        }
      });
    }
    // getProps(teaType) {
    //   let params = {
    //     name: "",
    //     teaType, // 内部导师0  外部导师1
    //     page: 1,
    //     pageSize: 10
    //   };
    //   this.publicAjax(params);
    // }
  }
};
</script>
<style lang="less" scoped>
@import url("~@/pagecss/teacher-list.less");
.bscroll-container {
  padding-bottom: 120px;
}
.default-page-box {
  position: relative;
  height: 100vh;
}
.default-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("~@/assets/studyCenter/null.png") 50% 30% no-repeat;
  background-size: 352/75rem 215/75rem;
}
.default-text {
  left: 0;
  right: 0;
  position: absolute;
  top: 45%;
  text-align: center;
  font-size: 30/75rem;
  font-weight: 400;
  color: rgba(110, 176, 246, 0.7);
}
</style>